<template>
  <div>
    <!-- 激活弹出框 -->
    <CommonDialog
      title="激活"
      width="75%"
      v-bind:dialogVisible="startDialogVisible"
      @on-change-dialogVisible="startChange"
      class="suspend"
      top="10vh"
    >
      <template #body>
        <el-form class="suspendForm" :model="startForm" ref="startFormRef" label-position="top">
          <el-form-item
            label="激活原因"
            class="suspendReason"
            prop="startReason"
            :rules="[{ required: true, message: '请输入激活原因', trigger: 'change' }]"
          >
            <!-- <quill-editor
              v-model="startForm.startReason"
              ref="suspendReasonEditor"
            >
            </quill-editor> -->
            <socialUpload :contentDefault="startForm.startReason" @getContent="getUpdateContent"></socialUpload>
            <!-- <vue-tinymce v-model="startForm.startReason"
                             :setting="setting" /> -->
          </el-form-item>
        </el-form>
      </template>
      <template #dialog_footer>
        <el-button class="submitCancel" @click="startCancel">取 消</el-button>
        <el-button type="primary" @click="confirmStart" class="submitReme">确认</el-button>
      </template>
    </CommonDialog>
  </div>
</template>

<script>
import socialUpload from '../socialUpload/socialUpload.vue'
import CommonDialog from '@/components/commonDialog/commonDialog.vue'
import { FeedBack } from '@/api/feedBack/server'
export default {
    name: '',
    components: {
        CommonDialog,
        socialUpload
    },
    props: {},
    data() {
        return {
            // 控制激活弹出框的显示与隐藏
            startDialogVisible: false,
            tableItemsId: '',
            // 激活弹出框表单内容
            startForm: {
                startReason: ''
            },
            setting: {
                branding: false,
                menubar: false,
                toolbar:
          'undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |',
                toolbar_drawer: 'sliding',
                quickbars_selection_toolbar:
          'removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor',
                plugins: 'link image  table lists fullscreen',
                language: 'zh_CN',
                init_instance_callback: editor => {
                    if (this.content) {
                        editor.setContent(this.content)
                    }
                    this.finishInit = true
                    editor.on('NodeChange Change SetContent KeyUp', () => {
                        this.hasChanged = true
                    })
                }, // 上传图片
                convert_urls: false,
                automatic_uploads: true, // 开启点击图片上传时，自动进行远程上传操作
                images_upload_base_path: `${process.env.VUE_APP_GOLDWIND_BASE_API}`, // 图片上传的基本路径
                images_upload_url: '/v2/file/upload',
                images_upload_handler: (blobInfo, success, failure) => {
                    var xhr, formData

                    xhr = new XMLHttpRequest()
                    xhr.withCredentials = false
                    xhr.open('POST', `${process.env.VUE_APP_GOLDWIND_BASE_API}` + '/v2/file/upload')
                    xhr.setRequestHeader('token', JSON.parse(sessionStorage.getItem('USERINFO')).token)
                    // xhr.setRequestHeader('token', JSON.parse(sessionStorage.getItem('USERINFO')).token);

                    formData = new FormData()
                    formData.append('file', blobInfo.blob())

                    formData.append('checkOfficeFmt', false)
                    formData.append('isTmp', false)
                    xhr.onload = function(e) {
                        var json
                        console.log(e, xhr)
                        console.log(this)

                        if (xhr.errcode == '0') {
                            failure('服务器错误:' + xhr.msg)
                            return
                        }
                        json = JSON.parse(this.responseText)
                        if (!json.data || typeof json.data.fileSourceId != 'string') {
                            failure('服务器错误')
                            return
                        }
                        success(
                            `${process.env.VUE_APP_GOLDWIND_BASE_API}` +
                '/v2/file/download?' +
                '&fileSourceId=' +
                json.data.fileSourceId
                        )
                    }
                    xhr.send(formData)
                },
                image_advtab: false,
                language_url: 'tinymce/langs/zh_CN.js', // 语言包的路径
                elementpath: false, // 隐藏元素路径，不明白的可以切换true/false观察页面
                statusbar: false,
                resize: false,
                height: 200
            }
        }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
        show(id) {
            console.log('jihuo', id)
            this.tableItemsId = id
            this.startDialogVisible = true
            this.startForm = {
                startReason: null
            }
        },
        startCancel() {
            this.$refs['startFormRef'].resetFields()
            this.startDialogVisible = false
        },
        // 确认激活
        confirmStart() {
            const objParmars = {
                content: this.startForm.startReason,
                id: this.tableItemsId,
                operationType: '7'
            }
            this.$refs['startFormRef'].validate(valid => {
                if (valid) {
                    this.startOptionAsync(objParmars)
                    this.startDialogVisible = false
                } else {
                    this.$message.error('请检查表单信息是否填写完整')
                    return false
                }
            })
        },
        startChange(val) {
            this.startDialogVisible = val
            this.$refs['startFormRef'].resetFields()
        },
        // 激活
        async startOptionAsync(parmars) {
            console.log('startOptionAsync', parmars)
            try {
                const result = await FeedBack.OperationAsync(parmars)
                if (result.success) {
                    this.closeDialogVisible = false
                    this.startForm = {
                        startReason: null
                    }
                    this.$emit('refreshPage')
                } else {
                    this.$message.error(result.message)
                }
            } catch (error) {
                console.log(error)
            }
        },
        getUpdateContent(Value) {
            this.startForm.startReason = Value
        }
    }
}
</script>

<style scoped lang="scss">
/* 中止弹出框样式 -- 开始 */
::v-deep .suspend .el-dialog__header {
  width: 100% !important;
}

::v-deep .suspend .el-dialog__body {
  overflow: auto;
}

::v-deep .suspend .el-dialog {
  box-sizing: border-box;
  border-radius: 5px;
}

::v-deep .suspendReason textarea {
  height: 80px;
  background: #ffffff;
  border: 1px solid #dadee0;
  border-radius: 2px;
}

/* 中止弹出框样式 -- 结束 */
</style>
